<%@ page import="com.maicss.coursedesign.dao.UserDao" %>
<%@ page import="java.util.Objects" %>
<%@ page import="com.maicss.coursedesign.types.User" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>课设</title>
    <link rel="icon" href="resources/favicon.ico">
    <link href="//at.alicdn.com/t/font_3371227_gbg8d0k0zk.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
    // 检测是否是在顶层窗口，若在frame里，则跳转顶层窗口。
    if (self!==top){
        top.location.href="index.jsp"
    }
    // 若使用浏览器返回键返回登录页面，若不写此段代码会在frame中显示此页面。
    window.setInterval(function (){
        if (self!==top){
            location.href="login/loginPage.jsp"
        }
    },100)

</script>
<%-- 检测是否已经登录，若未登录则跳转至登录页面 --%>
<% request.setCharacterEncoding("UTF-8");%>
<%
    String userName = (String) session.getAttribute("user");
    User user = null;
    if(userName == null){
        response.sendRedirect("login.jsp");
    }else {
        user = UserDao.GetUserByName(userName);
    }
%>
<%--页面主体开始--%>
<%--侧边栏--%>
<aside class="aside_menu">
    <img class="logo" src="resources/logo.png" alt="">
    <ul id="menu">
        <li class="menu_item menu_item_active" data-url="pages/home.jsp"><span class="iconfont">&#xe68d;</span> 首页</li>
<%--数据查询--%>
        <li class="mini_title">数据查询</li>
        <li class="menu_item">查询学生</li>
        <li class="menu_item">查询老师</li>
<%--数据录入--%>
        <li class="mini_title">数据录入</li>
        <li class="menu_item">删除学生</li>
        <li class="menu_item">删除老师</li>
<%--数据删除--%>
        <li class="mini_title">数据删除</li>
        <li class="menu_item">删除</li>
<%--后台管理--%>
        <li class="mini_title">后台管理</li>
        <li class="menu_item" data-url="pages/account.jsp"><span class="iconfont">&#xe6b3;</span> 账号管理</li>

    </ul>
</aside>
<%--顶栏--%>
<div class="top">
    <h2 id="title"></h2>
    <span class="user_name" id="user_name" onclick="showUserMenu(true)"><%=userName%></span>
    <img class="user_head" id="user_head" alt="" onclick="showUserMenu(true)">
    <ul id="user_menu">
        <li id="user_menu_exit">退出</li>
    </ul>
</div>
<%--主体内容--%>
<iframe id="context" class="context" src="pages/home.jsp">

</iframe>
<script>
    let LoginUserName = "<%=userName%>";
    <%if (user!=null){%>
    window.LoginUserID = <%=user.getId()%>;
    window.LoginUserHead = <%=user.getHead()%>;
    <%}%>

    // 用于使顶栏标题与frame一致
    let ContextFrame = document.getElementById("context")
    ContextFrame.addEventListener("load",function (){
        document.getElementById("title").innerText = this.contentWindow.document.title;
    })
    // 菜单点击事件
    let MenuItems = document.getElementsByClassName("menu_item")
    for (let item of MenuItems) {
        item.addEventListener("click",clickMenuItem)
    }
    function clickMenuItem() {
        for (let item of MenuItems) {
            item.classList.remove("menu_item_active")
        }
        this.classList.add("menu_item_active")
        ContextFrame.src = this.dataset.url
    }
    // 用户菜单显示事件
    let UserMenu = document.getElementById("user_menu")
    let UserName = document.getElementById("user_name")
    let UserHead = document.getElementById("user_head")
    UserName.addEventListener("click",showUserMenu)
    UserHead.addEventListener("click",showUserMenu)
    window.addEventListener("click",hideUserMenu)
    // window.addEventListener("click",checkLoginStatus)

    //显示用户菜单
    function showUserMenu() {
        UserMenu.style.right = "0"
        UserMenu.style.opacity = "1"
        event.stopPropagation()  //阻止事件冒泡
    }

    //隐藏用户菜单
    function hideUserMenu() {
        UserMenu.style.right = "-120px"
        UserMenu.style.opacity = "0"
    }
    // 设置头像
    function setUserHead(headCode) {
        if (headCode==null){
            headCode=0;
        }
        UserHead.src = "resources/head_icon/"+headCode.toString()+".png"
    }
    setUserHead(LoginUserHead)


    let UserMenu_Exit = document.getElementById("user_menu_exit")

    // 点击退出后跳转到登录页面，登录页面中会自动删除session中的user属性。
    UserMenu_Exit.addEventListener("click",event => {
        window.location.replace("login.jsp")
    })

    // 火狐浏览器不支持backdrop-filter属性，因此这里判断若为火狐浏览器，则令背景色为不透明全白
    let userAgent = navigator.userAgent
    if (userAgent.indexOf("Firefox") > -1) {
        document.getElementsByClassName("top")[0].style.backgroundColor="#FFF"
    }
</script>
</body>
</html>